<template>
  <!-- 主页面 -->
  <div class="index-wrap">
    <!-- 背景 -->
    <background />
    <!-- 头部区域 -->
    <myHeader />
    <!-- 底部区域 -->
    <bottomArea />
    <!-- 右下角区域 -->
    <bottomRightCorner />
    <bottomNewCorner />
    <!-- 聊天区域 -->
    <chatArea />
    <!-- 弹出区域 -->
    <myPopup />
    <!-- 效果层区域 -->
    <effect />
    <!-- 使用提示 -->
    <useTip />
    <!-- 加载 -->
    <loading />
    <!-- 按钮 -->
    <transition enter-active-class="animated faster zoomIn" leave-active-class="animated faster zoomOut">
      <div class="btn publicZIndexBtn" v-if="gameBtnVisible" ref="startBtn"></div>
    </transition>
    <div class="btnReal publicZIndexRealBtn" v-if="gameBtnVisible" v-tap="{ methods: enterGame }"></div>
    <!-- 霸屏关闭按钮 -->
    <div class="bapinCloseBtn publicZIndexRealBtn" v-tap="{ methods: closeCurrentBapin }" v-if="bapinCloseIconVisible"></div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import loading from '@/components/loading/loading.vue';
import useTip from '@/components/useTip/useTip.vue';
import { timeoutTask } from '@/utils/index';
import { attendGame } from '@/api/index/index';
import SVGA from 'svgaplayerweb';
import { startBtn } from '@/assets/constant/effect';
import background from './components/background.vue';
import myHeader from './components/headerArea.vue';
import bottomArea from './components/bottomArea.vue';
import chatArea from './components/chatArea.vue';
import myPopup from './components/popupArea.vue';
import effect from './components/effectArea.vue';
import bottomRightCorner from './components/bottomRightCorner.vue';
import bottomNewCorner from './components/bottomNewCorner.vue';

const wx = require('weixin-js-sdk');

let enterGameLock = false; // 锁,限制按钮连续点击
export default {
  name: 'index',
  computed: {
    ...mapState({
      gameBtnVisible: (state) => state.app.gameBtnVisible,
      gameUrl: (state) => state.game.gameUrl,
      needShake: (state) => state.game.needShake,
      enterType: (state) => state.game.enterType,
      gameStatus: (state) => state.game.gameStatus,
      bapinCloseIconVisible: (state) => state.app.bapinCloseIconVisible,
    }),
  },
  mounted() {
    enterGameLock = false;
    if (this.gameBtnVisible) {
      this.$nextTick(() => {
        this.SVGAPlayer = new SVGA.Player(this.$refs.startBtn);
        this.$svgaParser.load(startBtn, (videoItem) => {
          this.SVGAPlayer.setVideoItem(videoItem);
          this.SVGAPlayer.startAnimation();
        });
      });
    }
  },
  watch: {
    gameBtnVisible(newVal) {
      if (newVal) {
        console.log('***svga startBtn 展示***');
        this.$nextTick(() => {
          this.SVGAPlayer = new SVGA.Player(this.$refs.startBtn);
          this.$svgaParser.load(startBtn, (videoItem) => {
            this.SVGAPlayer.setVideoItem(videoItem);
            this.SVGAPlayer.startAnimation();
          });
        });
      } else {
        console.log('***svga startBtn 销毁***');
        if (this.SVGAPlayer) {
          this.SVGAPlayer.stopAnimation();
          this.SVGAPlayer.clear();
          this.SVGAPlayer = null;
        }
      }
    },
  },
  components: {
    loading,
    useTip,
    background,
    myHeader,
    bottomArea,
    chatArea,
    myPopup,
    effect,
    bottomRightCorner,
    bottomNewCorner,
  },
  data() {
    return {
    };
  },
  methods: {
    ...mapMutations({
      togglePopup: 'app/togglePopup',
      setIsCloseCurrentBapin: 'app/setIsCloseCurrentBapin',
    }),
    closeCurrentBapin() {
      this.setIsCloseCurrentBapin(true);
    },
    enterGame() {
      console.log(this.gameUrl);
      if (enterGameLock) {
        return;
      }
      enterGameLock = true;
      timeoutTask(() => {
        enterGameLock = false;
      }, 300);
      if (this.needShake) {
        if (window.DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === 'function') {
          // ios 13兼容性处理
          DeviceMotionEvent.requestPermission()
            .then((permissionState) => {
              if (permissionState === 'granted') {
                this.$toast.center('摇一摇授权成功!');
              }
            })
            .catch((err) => {
              console.log(err);
              this.$toast.center('用户未授权摇一摇!');
            });
        }
      }
      attendGame()
        .then(() => {
          if (this.enterType === 'mp') {
            let tmpGameUrl;
            // 如果当前处于游戏进行中的状态 进入小程序会直接进入游戏
            if (this.gameStatus === 2) {
              tmpGameUrl = `${this.gameUrl}&gameStatus=2`;
            } else {
              tmpGameUrl = this.gameUrl;
            }
            wx.miniProgram.navigateTo({
              url: tmpGameUrl,
            });
          } else if (this.enterType === 'h5') {
            console.log('跳转h5页面!');
            this.$router.push({
              path: this.gameUrl,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.index-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .hbkdIcon {
    position: absolute;
    width: 124px;
    height: 122px;
    right: 12px;
    bottom: 296px;
  }
  .btn {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    top: -15vw;
  }
  .btnReal {
    position: absolute;
    width: 412.5px;
    height: 180px;
    bottom: 31vw;
    left: 111px;
  }
  .bapinCloseBtn {
    width: 8vw;
    height: 8vw;
    position: absolute;
    background-image: url('https://static.hudongmiao.com/joymewScreen/img/qrcode/close.png');
    background-size: 100% 100%;
    top: 27vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
